<template>
  <Render :context="currentContext"></Render>
</template>

<script setup lang="ts">
import { useContextStore } from '../store/context';
import { storeToRefs } from 'pinia';
import Render from '../components/Render.vue';
import { useRouter } from 'vue-router';

const contextStore = useContextStore();
const { currentContext } = storeToRefs(contextStore);
contextStore.clearCurrentContext();

const router = useRouter();
contextStore.setCurrentContext(
  [
    {
      type: 'lines',
      lines: [
        {
          text: 'Hello! Welcome to Home Page. This is a simple demo.',
          color: 'red',
        },
      ],
    },
    {
      type: 'options',
      options: [
        {
          text: 'Start Go List',
          action: () => {
            router.push({ name: 'List' });
          },
          actionType: 'navigation'
        },
        {
          text: 'Show Error',
          action: () => {
            contextStore.appendCurrentContext([
              {
                type: 'lines',
                lines: [
                  {
                    text: 'Error!',
                    color: 'red',
                  },
                ],
              }
            ])
          },
          actionType: 'navigation'
        },
      ],
    }
  ]
);
</script>
